<script setup>
import { reactive, onMounted, inject } from 'vue'

const $http = inject('$http')

const dataObj = reactive({
  list: [
    {
      name: '街道',
      num: 0,
      unit: '个',
    },
    {
      name: '村',
      num: 0,
      unit: '个',
    },
    {
      name: '小区',
      num: 0,
      unit: '个',
    },
    {
      name: '全县常住人口',
      num: 0,
      unit: '人',
    },
    {
      name: '全县非常住人口',
      num: 0,
      unit: '人',
    },
  ],
})

onMounted(() => {
  getPersonInfo()
})

function getPersonInfo() {
  $http.get('/screen/page/home').then(res => {
    const { data = {} } = res || {}
    // street: 街道, village:村, xq:小区, cz: 全县常住人口, fcz: 全县非常住人口
    const { street = 0, village = 0, xq = 0, cz = 0, fcz = 0 } = data || {}
    const arr = [street, village, xq, cz, fcz]

    dataObj.list = dataObj.list.map((item, index) => {
      return {
        ...item,
        num: arr[index],
      }
    })
  })
}
</script>

<template>
  <div class="baseInfoBox">
    <div v-for="(item, index) in dataObj.list" :key="index" class="headerItem">
      <div class="label">{{ item.name }}</div>
      <div class="num">
        {{ item.num }}<span class="unit">{{ item.unit }}</span>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.baseInfoBox {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 113px;
  background: rgba(19, 181, 177, 0.2);

  .headerItem {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 16px;

    &:last-child {
      margin-right: 16px;
    }

    .label {
      width: 100%;
      height: 20px;
      font-size: 14px;
      font-weight: 500;
      color: #ffffff;
      display: flex;
      align-items: center;
    }

    .numBox {
      margin-top: 7px;
      width: 100%;
      height: 29px;
    }

    .num {
      margin-top: 7px;
      width: 100%;
      height: 29px;
      font-size: 24px;
      font-weight: bold;
      font-family: Tahoma-Bold, Tahoma;
      color: #ffffff;
      background: linear-gradient(180deg, #64cdab 0%, #49d0ff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      line-height: 1;
    }

    .unit {
      font-size: 14px;
      color: #ffffff;
      background: #ffffff;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}
</style>
